<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title></title>
    <link href="css/inform.css" rel="stylesheet"/>
</head>
<body>
<div id="app">
    <div><h1>消息通知</h1></div>
    <div class="form" v-for="m in maginforms">
        <div class="message">
            <img :src="m.img"/>
        </div>
        <a>{{m.sendname}}</a>
        <p>请求添加为好友</p>
        <div class="addtime"><p>{{m.requestTime}}</p></div>


        <!-- 根据 status 显示不同的内容 -->
        <template v-if="m.status === 0">
            <el-button @click="openDialog(m)">添加</el-button>

        </template>

        <template v-else-if="m.status === 1">
            <p>已添加</p>
        </template>

        <template v-else-if="m.status === -1">
            <!-- 状态为已拒绝时的处理 -->
            <p>请求已被拒绝</p>
        </template>


        <!-- 弹窗 -->
        <el-dialog :visible.sync="dialogVisible" title="添加好友" width="400px">
            <div class="dialog-content">
                <div class="dialog-image">
                    <img :src="selectedUser.img" alt="User Image" style="
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        object-fit: cover;
                        background-color: rgb(28, 81, 129);
                        margin-bottom: 15px;
                        margin-left: 150px;"/>
                </div>
                <el-form>
                    <el-form-item label="分组">
                        <!--                        <el-select placeholder="请选择分组" v-model="form.group">-->
                        <!--                            <el-option :key="group.value" :label="group.label" :value="group.value"-->
                        <!--                                       v-for="group in groups"/>-->
                        <!--                        </el-select>-->
                        <el-input autocomplete="off" maxlength="100" placeholder="选择分组" v-model="group">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="dialog-footer" style="margin-left: 100px">
                    <el-button @click="handleReject">拒绝</el-button>
                    <el-button @click="handleAccept" type="primary">同意</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</div>

</body>

<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<link
        href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css"
        rel="stylesheet"
/>
<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            dialogVisible: false,
            selectedUser: {},
            maginforms: {},
            group: '默认'
        },
        created() {
            let token = sessionStorage.getItem("Token");
            axios.defaults.headers.common['Token'] = token;

            axios.post("/user/user/getinform").then(res => {
                if (res.data.code == 1) {
                    this.maginforms = res.data.data;
                    // 格式化每个时间字段
                    this.maginforms.forEach(item => {
                        if (item.requestTime) {
                            let date = new Date(item.requestTime);
                            // 获取年份、月份和日期
                            let year = date.getFullYear();
                            let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以要加 1
                            let day = String(date.getDate()).padStart(2, '0');
                            // 格式化成 yyyy/MM/dd
                            item.requestTime = `${year}/${month}/${day}`;
                        }
                    });
                }
            });
        },
        methods: {
            openDialog(user) {
                this.selectedUser = user;
                console.log(this.selectedUser.senderId)
                this.dialogVisible = true;
            },
            handleAccept() {
                // 处理同意操作
                let p = new URLSearchParams();
                p.append("senderid", this.selectedUser.senderId);
                p.append("group", this.group);
                p.append("magInformid",this.selectedUser.id)
                //添加好友
                axios.post("/user/user/agree",p).then(res => {
                    if (res.data.code ==1){
                        window.location.reload();
                    }
                })
                this.dialogVisible = false;
            },
            handleReject() {
                // 处理拒绝操作
                this.dialogVisible = false;
            }
        },
    });
</script>
</html>
